<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员升级</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="__INDEX__/css/mui.min.css">
    <link rel="stylesheet" href="__INDEX__/css/footer.css">
    <!--标准mui.css-->
    <link rel="stylesheet" href="__INDEX__/css/mui.min.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="__FIR__/js/vue.js"></script>
    <script src="__FIR__/js/vue.min.js"></script>
    <script src="__FIR__/js/mui.min.js"></script>
    <script type="text/javascript" src="__FIR__/index/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="__FIR__/css/mobile-uploadImg.css">
</head>
<body>
<div class="mui-content">
    <ul class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell"><a href="" >升级类型<span style="color: #999999;margin-left: 30px;">
            {if $id == 3}
                铜牌会员
            {elseif $id == 4}
                银牌会员
            {elseif $id == 5}
                金牌会员
            {elseif $id == 6}
                钻石会员
            {elseif $id == 7}
                大客户私人订制
            {/if}
        </span></a>
        </li>
        <div class="ht2"></div>


        <li class="mui-table-view-cell"><a href="" >升级费用<span style="color: #999999;margin-left: 30px;">
            {if $id == 3}
                1000
            {elseif $id == 4}
                2000
            {elseif $id == 5}
                4000
            {elseif $id == 6}
                6000
            {elseif $id == 7}
                10000起
            {/if}
        </span></a>
        </li>
        <div class="ht2"></div>
        <li class="mui-table-view-cell"><a href="" >生效时间<span style="color: #999999;margin-left: 30px;">支付成功，审核通过生效</span></a>
        </li>
        <div class="ht2"></div>
        <li class="mui-table-view-cell"><a href="" >审核时间<span style="color: #999999;margin-left: 30px;">周一至周六(9:00-18:00)</span></a>
        </li>
        <div class="ht1"></div>
        <li class="mui-table-view-cell" style="padding-right: 37px;" ><a href="javascript:;" style="text-align: center;" >
            <img src="__PUB__/images/yipaiguan2.png" width="150px" height="150px"><p><img src="__PUB__/images/sys.png" width="150px" height="43px">
        </p></a>
        </li>

    </ul>
</div>
<div id="app">
    <form action="{:url('/iMemberSingle')}" method="post" enctype="multipart/form-data" style="min-height: 450px;" class="forget-pwd">
        <div class="mui-content" style="background:#fff">
            <div class="mui-input-row">
                <label>上传支付截图</label>
            </div>
            <div style="margin:20px 10px;">
                <div style="margin-top:20px;">
                    <div id="uploadImgForm3" class="uploadImgStyle2">
                        <div class="mbupload_frame" id="imageBgc3"
                             style="background:url(__FIR__/img/jt.png) no-repeat 50% 50%;">
                            <div class="mbupload_photoList">
                                <ul>
                                    <li class="mbupload_on mbupload_addPic mbupload_addImg"></li>
                                </ul>
                                <p class="mbupload_textTip mbupload_f12">上传支付成功截图</p>
                            </div>
                            <div class="mbupload_bgimg">
                                <div class="iconSendImg mbupload_addImg"><input type="file" ref="image3" name="img3"
                                                                                @change="uploadImgs(3)"></div>
                            </div>
                        </div>
                        <div class="subtijiao"  id="wsf-btn" style="position: relative;"><button style="" type="submit" class="mui-btn mui-btn-danger mui-btn-block">提交</button></div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="level_id" value="{$id}" >
        </div>
    </form>
</div>
{include file="common/foot"}
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                imgList: [],
                size: 0,
                img1: '1',
                img2: '',
                img3: '',
            }
        },
        methods: {
            uploadImgs(id) {
                var that = this
                if (id == 1) {
                    var imageObj1 = this.$refs.image1.files[0]
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(imageObj1);
                    fileReader.onload = function (e) {
                        $("#imageBgc1").css('background-image', 'url(' + e.target.result + ')');
                        $("#imageBgc1").css('background-size', '100%');
                        that.img1 = e.target.result
                    }
                } else if (id == 2) {
                    var imageObj2 = this.$refs.image2.files[0]
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(imageObj2);
                    fileReader.onload = function (e) {
                        $("#imageBgc2").css('background-image', 'url(' + e.target.result + ')');
                        $("#imageBgc2").css('background-size', '100%');
                        that.img2 = e.target.result
                    }

                } else if (id == 3) {
                    var imageObj3 = this.$refs.image3.files[0]
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(imageObj3);
                    fileReader.onload = function (e) {
                        $("#imageBgc3").css('background-image', 'url(' + e.target.result + ')');
                        $("#imageBgc3").css('background-size', '100%');
                        that.img3 = e.target.result
                    }

                }
            },


            SubmitsRZ() {
                var state = this.$refs.state_id.value;
                // 在处于 0 状态下
                if (state == 0) {
                    if (this.img1 == '' || this.img2 == '' || this.img3 == '') {
                        alert('身份证正面，反面以及支付截图!');
                        return
                    }
                    var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
                    var flag = reg.test(this.phone); //true
                    if (!flag) {
                        alert('手机号不正确')
                        return;
                    }
                    reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/      //身份证验证
                    flag = reg.test(this.sfz); //true
                    if (!flag) {
                        alert('身份证号不正确')
                        return;
                    }
                }
            }
        }
    })
</script>
</body>
</html>